/**
  其他境外交流项目管理-回国
*/
<template>
    <div class="go-home-report-container">
        <div class="info-container">
            <el-form :model="applyInfo" ref="applyInfo">
                <!-- 出访时间开始 -->
                <div class="privacy-title title">{{ $t('projectApplication.visitTime') }}</div>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <!-- 计划出发时间 -->
                        <el-form-item
                            :label="$t('projectApplication.plannedDepartureTime') + ':'"
                            prop="projectStartTime"
                        >
                            <el-input disabled v-model="projectStartTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <!-- 计划回国时间 -->
                        <el-form-item
                            :label="$t('projectApplication.plannedReturnHomeTime') + ':'"
                            prop="projectEndTime"
                        >
                            <el-input disabled v-model="projectEndTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <!-- 实际出发时间 -->
                        <el-form-item
                            :label="$t('projectApplication.actualDepartureTime') + ':'"
                            prop="realStartTimeStr"
                            :rules="[{ required: true, message: $t('projectApplication.requireActualDepartureTime'), trigger: 'blur' }]"
                        >
                            <el-date-picker
                                style="width: 100%"
                                v-model="applyInfo.realStartTimeStr"
                                disabled
                                type="date"
                                value-format="yyyy-MM-dd"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <!-- 实际回国时间 -->
                        <el-form-item
                            :label="$t('projectApplication.actualReturnHomeTime') + ':'"
                            prop="realEndTimeStr"
                            :rules="[{ required: true, message: $t('projectApplication.requireActualReturnHomeTime'), trigger: 'blur' }]"
                        >
                            <el-date-picker
                                style="width: 100%"
                                v-model="applyInfo.realEndTimeStr"
                                disabled
                                type="date"
                                value-format="yyyy-MM-dd"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <!-- 在校内所作公开访学学术报告 -->
                        <el-form-item
                            :label="$t('projectApplication.academicReport') + ':'"
                            prop="academicReport"
                        >
                            <el-input
                                type="textarea"
                                :rows="7"
                                :placeholder="$t('projectApplication.academicReportTip')"
                                v-model="applyInfo.academicReport"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 出访时间结束 -->
                <!-- 学术成果开始 -->
                <div class="privacy-title title other-title">
                    <span>{{ $t('projectApplication.academicAchievements') }}</span>
                </div>
                <el-form :model="academicAchieveTable" ref="academicAchieveTable" disabled>
                    <edu-table
                        :pagination="false"
                        :selection="false"
                        :order="false"
                        :tooltipEffect="tooltipEffect"
                        stripe
                        :data="academicAchieveTable.dataList"
                        size="mini"
                    >
                        <!-- 学术成果类型 -->
                        <edu-table-column :label="$t('学术成果类型')" prop="thesisType" width="110">
                            <template slot-scope="scope">{{ scope.row.thesisType | thesisType}}</template>
                        </edu-table-column>

                        <!-- 著作论文题目/专利名称 -->
                        <edu-table-column :label="$t('著作论文题目/专利名称')" prop="thesisTitle" width="170">
                            <template slot-scope="scope">
                                <el-form-item
                                    style="margin-top: 15px;"
                                    :prop="'dataList.' + scope.$index + '.thesisTitle'"
                                    label-width="0"
                                    :rules="[{ validator: checkSpecial, trigger: 'blur'}]"
                                >
                                    <el-input
                                        v-model.trim="scope.row.thesisTitle"
                                        :maxlength="32"
                                        type="textarea"
                                        autosize
                                        clearable
                                        :placeholder="$t('common.pla.pleaseInput')"
                                    ></el-input>
                                </el-form-item>
                            </template>
                        </edu-table-column>

                        <!-- 发表时间/获批时间（年/月） -->
                        <edu-table-column
                            :label="$t('发表时间/获批时间（年/月）')"
                            prop="publishDate"
                            width="200"
                        >
                            <template slot-scope="scope">
                                <el-form-item
                                    style="margin-top: 15px;"
                                    :prop="'dataList.' + scope.$index + '.publishDate'"
                                    label-width="0"
                                    :rules="[{ validator: checkSpecial, trigger: 'blur'}]"
                                >
                                    <el-date-picker
                                        style="width: 100%"
                                        v-model.trim="scope.row.publishDate"
                                        type="month"
                                        value-format="yyyy-MM"
                                        format="yyyy-MM"
                                        :placeholder="$t('graduateBase.chooseDateAndTime')"
                                    ></el-date-picker>
                                </el-form-item>
                            </template>
                        </edu-table-column>

                        <!-- 本人排名 -->
                        <edu-table-column :label="$t('本人排名')" prop="authorRanking" width="150">
                            <template slot-scope="scope">
                                <el-form-item
                                    style="margin-top: 15px;"
                                    :prop="'dataList.' + scope.$index + '.authorRanking'"
                                    label-width="0"
                                    :rules="[{ validator: checkSpecial, trigger: 'blur'}]"
                                >
                                    <el-input
                                        v-model.trim="scope.row.authorRanking"
                                        :maxlength="32"
                                        type="textarea"
                                        autosize
                                        rows="10"
                                        clearable
                                        :placeholder="$t('common.pla.pleaseInput')"
                                    ></el-input>
                                </el-form-item>
                            </template>
                        </edu-table-column>

                        <!-- 刊物名称（著作论文填写） -->
                        <edu-table-column
                            :label="$t('刊物名称（著作论文填写）')"
                            :render-header="renderHeader"
                            prop="periodicalName"
                            width="150"
                        >
                            <template slot-scope="scope">
                                <el-form-item
                                    style="margin-top: 15px;"
                                    :prop="'dataList.' + scope.$index + '.periodicalName'"
                                    label-width="0"
                                    :rules="[{ validator: checkSpecial, trigger: 'blur'}]"
                                >
                                    <el-input
                                        v-model.trim="scope.row.periodicalName"
                                        :maxlength="32"
                                        type="textarea"
                                        autosize
                                        rows="10"
                                        clearable
                                        :placeholder="$t('common.pla.pleaseInput')"
                                    ></el-input>
                                </el-form-item>
                            </template>
                        </edu-table-column>

                        <!-- 卷/期/页（著作论文填写） -->
                        <edu-table-column
                            :label="$t('卷/期/页（著作论文填写）')"
                            :render-header="renderHeader2"
                            prop="periodicalVolume"
                            width="140"
                        >
                            <template slot-scope="scope">
                               <el-form-item
                                        style="margin-top: 15px;"
                                        :prop="'dataList.' + scope.$index + '.periodicalVolume'"
                                        label-width="0"
                                        :rules="[{ validator: checkSpecial, trigger: 'blur'}]"
                                    >
                                        <el-input
                                            v-model.trim="scope.row.periodicalVolume"
                                            :maxlength="32"
                                            type="textarea"
                                            autosize
                                            rows="10"
                                            clearable
                                            placeholder="101(4):632-636"
                                        ></el-input>
                                    </el-form-item>
                            </template>
                        </edu-table-column>

                        <!-- 收录情况(如SCI/EI收录等) -->
                        <edu-table-column
                            :label="$t('收录情况(如SCI/EI收录等)')"
                            :render-header="renderHeader3"
                            prop="collectionSituation"
                            width="140"
                        >
                            <template slot-scope="scope">
                                <el-form-item
                                        style="margin-top: 15px;"
                                        :prop="'dataList.' + scope.$index + '.collectionSituation'"
                                        label-width="0"
                                        :rules="[{ validator: checkSpecial, trigger: 'blur'}]"
                                    >
                                        <el-input
                                            v-model.trim="scope.row.collectionSituation"
                                            :maxlength="32"
                                            type="textarea"
                                            autosize
                                            rows="10"
                                            clearable
                                            :placeholder="$t('common.pla.pleaseInput')"
                                        ></el-input>
                                    </el-form-item>
                            </template>
                        </edu-table-column>

                        <!-- 专利号及批准号 -->
                        <edu-table-column :label="$t('专利号及批准号')" prop="patentNumber" width="150">
                            <template slot-scope="scope">
                               <el-form-item
                                        style="margin-top: 15px;"
                                        :prop="'dataList.' + scope.$index + '.patentNumber'"
                                        label-width="0"
                                        :rules="[{ validator: checkSpecial, trigger: 'blur'}]"
                                    >
                                        <el-input
                                            v-model.trim="scope.row.patentNumber"
                                            :maxlength="32"
                                            type="textarea"
                                            autosize
                                            rows="10"
                                            clearable
                                            :placeholder="$t('common.pla.pleaseInput')"
                                        ></el-input>
                                    </el-form-item>
                            </template>
                        </edu-table-column>

                        <!-- 主要合作者 -->
                        <edu-table-column :label="$t('主要合作者')" prop="cooperationAuthor" width="150">
                            <template slot-scope="scope">
                              <el-form-item
                                        style="margin-top: 15px;"
                                        :prop="'dataList.' + scope.$index + '.cooperationAuthor'"
                                        label-width="0"
                                        :rules="[{ validator: checkSpecial, trigger: 'blur'}]"
                                    >
                                        <el-input
                                            v-model.trim="scope.row.cooperationAuthor"
                                            :maxlength="32"
                                            type="textarea"
                                            autosize
                                            rows="10"
                                            clearable
                                            :placeholder="$t('common.pla.pleaseInput')"
                                        ></el-input>
                                    </el-form-item>
                            </template>
                        </edu-table-column>

                        <!-- 是否有获奖等其他成果/荣誉 -->
                        <edu-table-column
                            :label="$t('是否有获奖等其他成果/荣誉')"
                            prop="otherAchievement"
                            width="200"
                        >
                            <template slot-scope="scope">
                               <el-form-item
                                        style="margin-top: 15px;"
                                        :prop="'dataList.' + scope.$index + '.otherAchievement'"
                                        label-width="0"
                                        :rules="[{ validator: checkSpecial, trigger: 'blur'}]"
                                    >
                                        <el-input
                                            v-model.trim="scope.row.otherAchievement"
                                            :maxlength="32"
                                            type="textarea"
                                            autosize
                                            rows="10"
                                            clearable
                                            :placeholder="$t('common.pla.pleaseInput')"
                                        ></el-input>
                                    </el-form-item>
                            </template>
                        </edu-table-column>
                    </edu-table>
                </el-form>
                <!-- 学术成果结束 -->
                <!-- 上传材料开始 -->
                <div class="privacy-title title other-title">
                    <span>{{ $t('projectApplication.uploadMaterial') }}</span>
                    <!-- 总结报告模板 下载 -->
                    <!-- <el-button style="margin-left: 30px;" type="text" size="medium" @click="downloadSummaryReport()">{{ $t('projectApplication.summaryReport') }}</el-button> -->
                    <!-- 考核表模板 下载 -->
                    <!-- <el-button type="text" size="medium" @click="downloadAssessTable()">{{ $t('projectApplication.assessFormTemplate') }}</el-button> -->
                    <!-- 结题报告模板 下载 -->
                    <!-- <el-button type="text" size="medium" @click="downloadConcludingReport()">{{ $t('projectApplication.concludingReportTemplate') }}</el-button> -->
                </div>
                <el-divider></el-divider>
                <!-- <div style="margin-left: 20px;color: #8896a7;font-size: 12px;">{{ $t('externamExchangeBase.fileName') }}</div>
                <el-divider></el-divider>-->
                <el-row :gutter="24" class="file-container">
                    <el-col :span="24">
                        <!-- 短期出国访学总结报告 -->
                        <el-form-item
                            :label="$t('projectApplication.summaryReportFile')"
                            prop="summaryReportFile"
                            label-width="80px"
                            style="margin: 12px 0;"
                            :rules="[{ required: true, message: $t('projectApplication.requireSummaryReportFile'), trigger: 'change'}]"
                        >
                            <el-upload
                                disabled
                                v-model="applyInfo.summaryReportFile"
                                class="upload-demo"
                                action="/api/commonservice/obsfile/uploadfile"
                                :data="uploadConfig.data"
                                :on-preview="(file) => downloadMaterial(file, 221, 'summaryReportFile')"
                                :limit="1"
                                :file-list="getFileList(applyInfo.files, 221)"
                            ></el-upload>
                            <span
                                class="file-tip-info"
                            >{{ $t('projectApplication.summaryReportFileTip') }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row :gutter="24" class="file-container">
                    <el-col :span="24">
                        <!-- 短期访学考核表 -->
                        <el-form-item
                            :label="$t('projectApplication.assessFormFile')"
                            prop="assessFormFile"
                            label-width="80px"
                            style="margin: 12px 0;"
                            :rules="[{ required: true, message: $t('projectApplication.requireAssessFormFile'), trigger: 'change'}]"
                        >
                            <el-upload
                                disabled
                                v-model="applyInfo.assessFormFile"
                                class="upload-demo"
                                action="/api/commonservice/obsfile/uploadfile"
                                :data="uploadConfig.data"
                                :on-preview="(file) => downloadMaterial(file, 222, 'assessFormFile')"
                                :limit="1"
                                :file-list="getFileList(applyInfo.files, 222)"
                            ></el-upload>
                            <span
                                class="file-tip-info"
                            >{{ $t('projectApplication.assessFormFileTip') }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row :gutter="24" class="file-container">
                    <el-col :span="24">
                        <!-- 结题报告 -->
                        <el-form-item
                            :label="$t('projectApplication.concludingReportFile')"
                            prop="concludingReportFile"
                            label-width="80px"
                            style="margin: 12px 0;"
                            :rules="[{ required: true, message: $t('projectApplication.requireConcludingReportFile'), trigger: 'change'}]"
                        >
                            <el-upload
                                disabled
                                v-model="applyInfo.concludingReportFile"
                                class="upload-demo"
                                action="/api/commonservice/obsfile/uploadfile"
                                :data="uploadConfig.data"
                                :on-preview="(file) => downloadMaterial(file, 223, 'concludingReportFile')"
                                :limit="1"
                                :file-list="getFileList(applyInfo.files, 223)"
                            ></el-upload>
                            <span
                                class="file-tip-info"
                            >{{ $t('projectApplication.concludingReportFileTip') }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row :gutter="24" class="file-container">
                    <el-col :span="24">
                        <!-- 其他附件 -->
                        <el-form-item
                            :label="$t('projectApplication.otherFileInfo')"
                            prop="otherFileInfo"
                            label-width="80px"
                            style="margin: 12px 0;"
                            :rules="[{ required: true, message: $t('projectApplication.requireOtherFileInfo'), trigger: 'change'}]"
                        >
                            <el-upload
                                disabled
                                v-model="applyInfo.otherFileInfo"
                                class="upload-demo"
                                action="/api/commonservice/obsfile/uploadfile"
                                :data="uploadConfig.data"
                                :on-preview="(file) => downloadMaterial(file, 224, 'otherFileInfo')"
                                :limit="1"
                                :file-list="getFileList(applyInfo.files, 224)"
                            ></el-upload>
                            <span
                                class="file-tip-info"
                            >{{ $t('projectApplication.otherFileInfoTip') }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <!-- 上传材料结束 -->
            </el-form>
            <slot></slot>
            <slot name="footer">
                <template v-if="showProcess">
                    <!-- 审批进度开始 -->
                    <div
                        class="privacy-title title other-title"
                        style="margin-top: 40px;"
                    >{{ $t('exchangeProjectAudit.auditProgress') }}</div>
                    <edu-table
                        :pagination="false"
                        :tooltipEffect="tooltipEffect"
                        :selection="false"
                        stripe
                        :data="approvalProgressData"
                        size="mini"
                    >
                        <edu-table-column :label="$t('exchangeProjectAudit.time')" prop="time">
                            <template slot-scope="scope">{{ scope.row.time | time }}</template>
                        </edu-table-column>
                        <edu-table-column :label="$t('exchangeProjectAudit.character')" prop="role"></edu-table-column>
                        <edu-table-column
                            :label="$t('exchangeProjectAudit.approvalDepartment')"
                            prop="approvorName"
                        ></edu-table-column>
                        <edu-table-column
                            :label="$t('exchangeProjectAudit.approvalResults')"
                            prop="result"
                        >
                            <template slot-scope="scope">{{ scope.row.result | result}}</template>
                        </edu-table-column>
                        <edu-table-column
                            :label="$t('exchangeProjectAudit.approvalInstructions')"
                            prop="content"
                        ></edu-table-column>
                    </edu-table>
                    <!-- 审批进度结束 -->
                </template>
            </slot>
        </div>
    </div>
</template>
<script>
import { downloadfile } from 'common/src/api/upload'
import externalExchangeApi from 'common/src/api/externalExchange/externalExchange'
import * as INDEX from 'common/src/utils/index'
export default {
    components: {},
    data() {
        return {
            applyInfo: {
                realStartTimeStr: '',
                realEndTimeStr: '',
                academicReport: '',
                summaryReportFile: '',
                assessFormFile: '',
                concludingReportFile: '',
                otherFileInfo: '',
                files: []
            },
            academicAchieveTable: {
                dataList: []
            },
            fileList: [],
            uploadConfig: {
                data: { bucketname: 'face', folderpath: 'file' }
            },
            fileFlag: true,
            fileInfo: [
                {
                    number: 221,
                    fileId: '',
                    fileName: ''
                },
                {
                    number: 222,
                    fileId: '',
                    fileName: ''
                },
                {
                    number: 223,
                    fileId: '',
                    fileName: ''
                },
                {
                    number: 224,
                    fileId: '',
                    fileName: ''
                }
            ],
            approvalProgressData: []
        }
    },
    props: {
        backId: {
            type: String,
            default: ''
        },
        projectStartTime: {
            type: String,
            default: ''
        },
        projectEndTime: {
            type: String,
            default: ''
        },
        showProcess: {
            type: Boolean,
            default: true
        }
    },
    filters: {
        time(time) {
            return INDEX.parseTime(time, '{y}-{m}-{d}')
        },
        result(val) {
            switch (val) {
                case 'COMMIT':
                    return '提交'
                case 'Process':
                    return '通过'
                case 'Reject':
                    return '已驳回'
                case 'Recall':
                    return '撤回'
                case 'End':
                    return '通过'
                case 'approveNoPass':
                    return '未通过'
                default:
                    return val
            }
        },
        thesisType(val) {
            switch (val) {
                case 1:
                    return '著作'
                case 2:
                    return '期刊论文'
                case 3:
                    return '会议论文'
                case 4:
                    return '专利'
                default:
                    return val
            }
        }
    },
    computed: {},
    created() {},
    async mounted() {
        const response = await externalExchangeApi.selectReturnHomeDetail({
            backId: this.backId
        })
        if (response.code === 200 && response.data) {
            let responseData = JSON.parse(JSON.stringify(response.data))
            // 获取审批进度记录
            this.approvalProgressData = response.data.processes ? response.data.processes : []
            this.applyInfo.realStartTimeStr = responseData.realStartTime
            this.applyInfo.realEndTimeStr = responseData.realEndTime
            this.applyInfo.academicReport = responseData.academicReport
            this.applyInfo.files = responseData.files
            this.academicAchieveTable.dataList = responseData.achievement
        }
    },
    methods: {
        // 获取文件fileList
        getFileList(fileArr, number) {
            let fileArray = []
            fileArr.map(value => {
                if (value.number === number) {
                    fileArray.push({
                        url: value.fileId,
                        name: value.fileName,
                        uid: value.fileId
                    })
                }
            })
            return fileArray
        },
        renderHeader(h, para) {
            return h('div', {
                attrs: {
                    class: 'cell'
                },
                domProps: {
                    innerHTML: '刊物名称</br>著作论文填写'
                }
            })
        },
        renderHeader2(h, para) {
            return h('div', {
                attrs: {
                    class: 'cell'
                },
                domProps: {
                    innerHTML: '卷/期/页</br>著作论文填写'
                }
            })
        },
        renderHeader3(h, para) {
            return h('div', {
                attrs: {
                    class: 'cell'
                },
                domProps: {
                    innerHTML: '收录情况</br>如SCI/EI收录等'
                }
            })
        },
        // 下载总结报告模板
        downloadSummaryReport() {
            externalExchangeApi.templateDownload({
                type: 221,
                fileName: '总结报告模板.docx'
            })
        },
        // 下载考核表模板
        downloadAssessTable() {
            externalExchangeApi.templateDownload({
                type: 222,
                fileName: '考核表模板.docx'
            })
        },
        // 下载结题报告模板
        downloadConcludingReport() {
            externalExchangeApi.templateDownload({
                type: 223,
                fileName: '结题报告模板.docx'
            })
        },
        downloadMaterial(file, fileNumber, key) {
            if (file.url) {
                downloadfile(file.url)
            } else if (file.status === 'success' && file.response.data) {
                downloadfile(file.response.data[file.name].objectkey)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.go-home-report-container {
    .el-breadcrumb__item:last-child ::v-deep {
        .el-breadcrumb__inner {
            color: #606266;
            font-weight: bold;
            cursor: default;
        }
    }
    .el-breadcrumb__item ::v-deep {
        .is-link {
            color: #aaa;
            font-weight: unset;
        }
        .is-link:hover {
            color: #409eff;
        }
    }
    .title {
        font-weight: bold;
        font-size: 18px;
    }
    .privacy-title {
        margin-bottom: 20px;
    }
    .other-title {
        margin-top: 20px;
    }
    .audit-container {
        padding-left: 15px;
    }
    .info-container {
        padding-left: 15px;
    }
    .file-container ::v-deep {
        margin-left: 10px !important;
        .el-form-item {
            margin-bottom: 0;
        }
        .el-form-item__label {
            text-align: left !important;
        }
        .upload-demo {
            width: 450px;
            text-align: center;
            line-height: 0;
            .el-upload-list__item:first-child {
                margin-top: 0;
            }
        }
        .file-tip-info {
            flex: 1;
            color: #8896a7;
        }
        .el-form-item__content {
            display: flex;
        }
    }
    .el-divider--horizontal {
        margin: 7px 0 !important;
    }
}
</style>
